<!DOCTYPE HTML>
<html>
    <head>
        <title>liveplayer</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <style>
            .input-player{
                outline: none;
                background: transparent;
                border: 1px solid #ccc;
                width: 80%;
                height: 2rem;
                padding-left: .1rem;
            }
            button{
                margin: 0 auto;
            }
            p{
                text-align: center;
            }
        </style>
    </head>
    <body style="margin:0">
        <!--多清晰度播放示例-->
        <!-- <live-player video-url="http://192.168.1.11:10080/fvod/GTUGsiqig/video.m3u8"  show-custom-button="true" autoplay="true" aspect="16:9"  resolution="yh,fhd,hd,sd" resolutiondefault="fhd"></live-player> -->
        <!--HTTP-FLV直播播放示例-->
        <!-- <live-player video-url="http://192.168.1.11:10080/flv/vlive/68i3az6mg.flv" live="true" aspect="fullscreen"></live-player> -->
        <!--RTMP播放示例-->
        <!-- <live-player video-url="rtmp://192.168.1.11:10085/vlive/_9VKyi3mg" live="true" aspect="fullscreen"></live-player> -->
        <!--M3U8播放示例-->
        <!-- <live-player video-url="http://192.168.1.11:10080/vhls/_9VKyi3mg/_9VKyi3mg_live.m3u8" live="true" aspect="16:9"></live-player> -->
        <!--mp4播放示例-->
        <!-- <live-player video-url="http://192.168.1.11:10080/vod/download/mwoDv_iWR"  aspect="16:9"></live-player> -->

        <!-- <live-player id="player01" video-url="http://192.168.2.135:10080/vhls/0XpHAMvWR/0XpHAMvWR_live.m3u8" live="true"  aspect="16:9" stretch="true"></live-player> -->
        <input type="text" id="input-url" class="input-player" value="" placeholder="请输入您要拉流的地址">
        <button id="submit">提交</button>
        <live-player  video-url="" live="true"  aspect="16:9" stretch="true"></live-player>

        <p>直播拉流测试demo(create:lin)</p>
        <script>

            let liveplay = document.querySelector("live-player").getAttribute('video-url'),
                 inputurl = document.getElementById("input-url"),
                 submit = document.getElementById("submit");

     

            submit.onclick = function(){
                
                document.querySelector("live-player").setAttribute("video-url",inputurl.value);
            }
             //--------------------JavaScript 交互示例, 当前示例页面放置到web容器里通过http请求访问页面--------------------
            // var player = document.getElementById('player01');
            // player.addEventListener('snapOutside', function(evt) {
            //     console.log('获取快照 base64 数据', evt.detail[0]);
            // });
            // setTimeout(function() {
            //     console.log("快照, 回调 snapOutside...");
            //     player.getVueInstance().snap();
            //     console.log("静音...");
            //     player.getVueInstance().setMuted(true);
            //     console.log("静音状态: " + player.getVueInstance().getMuted());
            //     console.log("暂停...");
            //     player.getVueInstance().pause();
            //     console.log("暂停状态: " + player.getVueInstance().paused());
            // }, 3000);
            // setTimeout(function() {
            //     console.log("放音...");
            //     player.getVueInstance().setMuted(false);
            //     console.log("静音状态: " + player.getVueInstance().getMuted());
            //     console.log("播放...");
            //     player.getVueInstance().play();
            //     console.log("暂停状态: " + player.getVueInstance().paused());
            // }, 6000);
            // setTimeout(function() {
            //     console.log("切换媒体源...");
            //     player.setAttribute("video-url", "rtmp://live.hkstv.hk.lxdns.com/live/hks2");
            // }, 9000);

            //--------------------常见问题--------------------
            //1、提示： TypeError: The element or ID supplied is not valid. (videojs)
            //检查 video-url 设置的播放地址 是否有效（可以用 VLC 播放尝试）

            //2、提示：Access to XMLHttpRequest at ... from origin .... has been blocked by CORS policy
            //检查 video-url 设置的播放地址 是否允许跨域访问

            //3、设置为 aspect='fullscreen'时，父级元素加上 position: relative
        </script>
    <script type="text/javascript" src="liveplayer-element.min.js"></script></body>
</html>